<template>
  <div>
    <div class="cbody" style="padding-bottom: 100px">
      <div class="info">
        
        <div class="head" v-if="aChange == 1">
          <div class="con">
            <div class="word">
            <div class="count">¥{{finInfo.selectAllPrice.toFixed(2)}}</div>
            <div class="name">总收入</div>
            
          </div>
          <img src="./../../images/main/01.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥{{finInfo.frozenPrice.toFixed(2)}}</div>
            <div class="name">冻结金额</div>
            
          </div>
          <img src="./../../images/main/02.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥{{finInfo.balance.toFixed(2)}}</div>
            <div class="name">账户余额</div>
            
          </div>
          <img src="./../../images/main/03.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥{{finInfo.tiPrice.toFixed(2)}}</div>
            <div class="name">已提现金额</div>

          </div>
          <img src="./../../images/main/04.png" alt="">
          </div>
          <div class="tixian">
          <el-button type="primary" round @click="goCash()">提现</el-button>
        </div>
        </div>
        <div class="head" v-else>
          <div class="con">
            <div class="word">
            <div class="count">¥{{withdrawTotal.selectAllPrice.toFixed(2)}}</div>
            <div class="name">总收入</div>
          </div>
          <img src="./../../images/main/01.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥{{withdrawTotal.selectDaiPrice.toFixed(2)}}</div>
            <div class="name">待结算</div>
          </div>
          <img src="./../../images/main/02.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥{{withdrawTotal.balance.toFixed(2)}}</div>
            <div class="name">账户余额</div>
          </div>
          <img src="./../../images/main/03.png" alt="">
          </div>
          <div class="tixian">
          <el-button type="primary" round @click="goCash()">提现</el-button>
        </div>
        </div>
      </div>
      <div class="titles">财务明细</div>

      <div class="change">
        <div :class="aChange == 0 ? 'aced' : ''" @click="tabs(0)">收入</div>
        <div :class="aChange == 1 ? 'aced' : ''" @click="tabs(1)">提现</div>
      </div>
    
     <el-table v-if="aChange == 0" :data="finList" stripe style="width: 100%">
        <el-table-column align="center" prop="activity_title" label="活动名称"></el-table-column>
        <el-table-column align="center" prop="store_name" label="门店名称"></el-table-column>
        <el-table-column align="center" prop="area" label="活动收入">
          <template slot-scope="scope">
            <div>
              {{scope.row.shi_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="分成比例">
          <template slot-scope="scope">
            <div>
              {{scope.row.fen}}%
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="平台佣金">
          <template slot-scope="scope">
            <div>
              {{scope.row.ping_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="分成金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.fen_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="注册时间">
          <template slot-scope="scope">
            <div>
              <p>{{setDate(scope.row.end_time)}} {{setTime(scope.row.end_time)}}</p>
            </div>
          </template>
        </el-table-column>
        
    </el-table>
    <el-table v-else :data="withdrawList" stripe style="width: 100%">
        <el-table-column align="center"  label="金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="registerTime" label="注册时间">
          <template slot-scope="scope">
            <div>
              <p>{{setDate(scope.row.end_time)}} {{setTime(scope.row.end_time)}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="状态">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.states == 0">待审核</div>
          <div v-if="scope.row.states == 1">未打款</div>
          <div v-if="scope.row.states == 2">已完成</div>
          <div v-if="scope.row.states == 3">已驳回</div>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <div
      :style="{
          textAlign: 'center',
          width: '100%',
          background: '#fff',
          padding: '10px 0'
        }"
    >
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalPage"
        @current-change="changePage"
      ></el-pagination>
    </div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        limit: 10,
        page: 1,
        partnerId: this.$store.state.partnerId
      },
      totalPage: 1,
      withdrawTotal: {},
      withdrawList: [],
      finInfo: {},
      finList: [],
      txList: [],
      aChange: 0
    };
  },
  watch: {
    aChange(val) {
      this.params.page = 1;
      if (val === 1) {
        this.getWithdrawList();
      } else {
        this.getFinList();
      }
    }
  },
  methods: {
    changePage(argv) {
      this.params.page = argv;
      if (this.aChange == 0) {
        this.getFinList();
      } else {
        this.getWithdrawList();
      }
    },
    getWithdrawList() {
      axios({
        method: "post",
        url: `${this.$store.state.url}/withdrawal/selectByPartnerId`,
        // data: qs.stringify ({
        //   // partnerId: this.$store.state.partnerId
        // })
        data: qs.stringify(this.params)
      }).then(response => {
        let res = response.data;
        if (res.code == 0) {
          this.totalPage = Math.ceil(res.count / 10);
          this.withdrawList = res.data;
        }
      });
    },
    getWithdrawTotal() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/withdrawal/selectTong`,
        data: qs.stringify({
          partnerId: this.$store.state.partnerId
          // states:num
        })
      }).then(response => {
        let res = response.data;
        if (res.code == 0) {
          this.withdrawTotal = res.data;
        }
      });
    },
    /**
     * 提现
     */
    goCash: function() {
      this.$router.push({
        path: "/main/initiation"
      });
    },
    /**
     * 切换
     */
    tabs: function(num) {
      this.aChange = num;
    },
    /**
     * 审核
     */
    examine: function(id, num) {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/tWithdrawal/updateStates`,
        data: qs.stringify({
          id: id,
          states: num
        })
      }).then(res => {
        if (res.data.code == 0) {
          that.getFinList();
        } else {
          alert(res.data.msg);
        }
      });
    },

    /**
     * 查询提现统计 withdrawal/selectByPartnerId
     */
    getFinTx: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/withdrawal/selectCaiTong`,
        data: qs.stringify({
          partnerId: this.$store.state.partnerId
        })
        // data:qs.stringify(that.params)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.txList = res.data.data;
        } else {
          alert(res.data.msg);
        }
      });
    },
    /**
     *  查询财务统计
     */
    getFinDetail: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/withdrawal/selectCaiTong`,
        // data:qs.stringify(that.params)
        data: qs.stringify({
          partnerId: this.$store.state.partnerId
        })
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.finInfo = res.data.data;
        } else {
          alert(res.data.msg);
        }
      });
    },
    /**
     *  查询财务列表
     */
    getFinList: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/withdrawal/selectIncomeList`,
        data: qs.stringify(that.params)
      }).then(res => {
        if (res.data.code == 0) {
          this.totalPage = Math.ceil(res.data.count / 10);
          that.finList = res.data.data;
        } else {
          that.$alert("系统错误!");
        }
      });
    },
    /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getFinList();
    this.getFinDetail();
    this.getWithdrawTotal();
  }
};
</script>
<style style="text/css" lang="scss" scoped>
.titles {
  height: 60px;
  line-height: 60px;
  color: #333;
  font-size: 14px;
}
.head .tixian {
  width: 120px;
  height: 98px;
  line-height: 98px;
  padding:0px;
  text-align: center;
  float: right;
  background: none;
}
.change {
  // height: 70px;
  overflow: hidden;
  line-height: 40px;
  // border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
.change > div {
  float: left;
  width: 70px;
  margin-left: 10px;
  text-align: center;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
}
.change > div :last-of-type {
  margin-left: 100px;
}
.change .aced {
  border-bottom: 2px solid #4B74FF;
  color: #4B74FF;
  box-sizing: border-box;
}


.head {
  margin-top: 20px;
  display: flex;
  width: 1050px;
}
.head > div {
  flex: 1;
  height: 98px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  display: inline-block;
  margin: 0 5px;
}

.name {
  font-size: 14px;
  color: #252631;
  height: 24px;
  text-align: center;
}
.count {
  height: 50px;
  font-size: 22px;
  color: #4b74ff;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;
}
.word {
  width: 55%;
  float: left;
}
.con img {
  float:right;
  width: 25%;
  margin-top: 20px;
  margin-right: 10%;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}

</style>


